<template>
  <div>
    <el-carousel :interval="2000" type="card" height="350px">
      <el-carousel-item v-for="item in src" :key="item">
        <!-- <img style=" width:100%;height:100%;" :src="src"  class="image"> -->
        <!-- object-fit: scale-down; -->
        <a :href="item" target="_blank">
          <el-image :src="item" style="width:100%; height:100%"></el-image> </a>
      </el-carousel-item>
    </el-carousel>

    <div class="sa">

      <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
    <el-radio-button :label="false">expand</el-radio-button>
    <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group> -->


      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <div class="sa">
      <el-row>

        <el-col :span="6">1-1
          <div id="one" ref="one" style="height: 400px;width: 100%"></div>
        </el-col>
        <el-col :span="6">1-2
          <!-- <div id="one" style="height: 100%;width: 60%"></div> -->
        </el-col>

        <el-col :span="6">1-3
          <!-- <span> ssssssssssss</span> -->
          <!-- <div id="one" style="height: 40vh;width: 60%"></div> -->
        </el-col>

      </el-row>

    </div>

    <div class="sa">
      <el-row>
        <el-col :span="12">2-1
          <div id="two" style="height: 100px;width: 100%;"></div>
        </el-col>
        <el-col :span="12">2-2
          <div id="three" style="height: 80vh;width: 100%;"></div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>
<script >
// import { ref } from 'vue';
// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Menu,
//   Setting,
// } from '@element-plus/icons-vue';
import * as echarts from 'echarts';

// const isCollapse = ref(true)
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }

export default {
  data() {
    return {
      menuList: [
        {
          name: "系统管理",
          list: [{
            name: "用户管理",
            list: [{ name: "查看用户" }]
          }, { name: "权限管理" }]
        },
        { name: "文件管理", list: [{ name: "上传文件" }, { name: "文件查看" }] }
      ],
      store: true,
      userType: null,
      src: [
          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
        ],
    };
  },
  mounted() {
    this.one();
    this.two();
    this.three();
    // this.userType = this.$api.getSession('type');

  },
  methods: {


    one() {
      // let chartDom = document.getElementById('one');
      let chartDom = this.$refs.one;
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        title: {
          // text: 'Basic Radar Chart'
        },
        legend: {
          data: ['蓝色', '绿色']
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
          ]
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '蓝色'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '绿色'
              }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    two() {
      let chartDom = document.getElementById('two');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            detail: {
              formatter: '{value}'
            },
            data: [
              {
                value: 50,
                name: 'SCORE'
              }
            ]
          }
        ]
      }; option && myChart.setOption(option);
    },
    three() {
      let chartDom = document.getElementById('three');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            detail: {
              formatter: '{value}'
            },
            data: [
              {
                value: 50,
                name: 'SCORE'
              }
            ]
          }
        ]
      }; option && myChart.setOption(option);
    },

  },
  // components: { Menu }
}


</script>

<style>


.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-carousel__item img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.rl {
  display: block;
  /* width: 100px; */
  /* right: 100px; */
  /* border-width: 10px; */
  border-color: red;
  border-style: solid;
  border-top: 10px 20px;
}

.el-calendar-day {
  height: 20px !important;
  width: 20px !important;
  border: none;
  text-align: center;
  padding: 0;
}

.sa {
  padding: 20px;
  border: 2px;
  border-color: bisque;
  border: 1px solid bisque;
}
</style>
